<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!--引入各种库和样式-->
	<title>{{ title_by_user }}</title>
	<link rel="stylesheet" href="/static/dependency/js/bootstrap-3.3.7/css/bootstrap.css">
	<link rel="stylesheet" href="/static/dependency/js/messenger/build/css/messenger-theme-future.css">
	<link rel="stylesheet" href="/static/dependency/js/messenger/build/css/messenger.css">
	<link rel="stylesheet" href="/static/dependency/js/simplePagination.js/simplePagination.css">
	<link rel="shortcut icon" type="image/x-icon" href="/static/dependency/pic/logo.ico"/>
	<script src="/static/dependency/js/jquery-3.2.1.min.js"></script>
	<script src="/static/dependency/js/bootstrap-3.3.7/js/bootstrap.js"></script>
	<script src="/static/dependency/js/messenger/build/js/messenger.js"></script>
	<script src="/static/dependency/js/simplePagination.js/jquery.simplePagination.js"></script>
	<!--简单的样式表-->
	<style>
		.cypherarea{
			margin: 10px;
		}
		.cypheroutput{
			width: 80%;
		}
		.alert-success,.basic_info {
			margin: 18px;
		}
		body{
			background-color: #e8edf3;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<div class="page-header">
				<h1>
					Sora分析器
				</h1>
				<h6>
					Copyright © 2017 Hochikong. All rights reserved.
				</h6>
			</div>
			<!--导航栏-->
			<nav class="navbar navbar-default" role="navigation">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span>
						<span class="icon-bar"></span></button> <a class="navbar-brand">{{ logged_user }}</a>
					    <!--显示用户登录信息-->
				</div>

				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li class="active">
							<a href="analyzer.html">A股</a>
						</li>
						<li>
							<a href="https://www.botvs.com/">BotVS</a>
						</li>
						<li>
							<a href="#">MT4</a>
						</li>
						<li>
							<a id="logout">注销</a>
						</li>
					</ul>
				</div>

			</nav>
			<div class="tabbable" id="tabs-976176">
				<ul class="nav nav-tabs">
					<li>
						<a href="#panel-200000" data-toggle="tab">基本信息</a>
					</li>
					<li class="active">
						<a href="#panel-762140" data-toggle="tab">汇总</a>
					</li>
					<li>
						<a href="#panel-145673" data-toggle="tab">Cypher</a>
					</li>
					<li>
						<a href="#panel-100000" data-toggle="tab">配置</a>
					</li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane" id="panel-200000">
						<div class="basic_info">
							<div class="panel panel-success">
								<div class="panel-heading">
									<h3 class="panel-title">
										基本信息
									</h3>
								</div>
								<div class="panel-body">
									<h1>详细信息</h1>
									<button type="button" id="message">测试</button>
								</div>
							</div>
						</div>
					</div>
					<div class="tab-pane active" id="panel-762140">
						<div class="panel panel-primary">
							<div class="panel-heading">
								<h3 class="panel-title">
									持股信息
								</h3>
							</div>
							<div class="panel-body">
								<table class="table table-condensed table-hover">
									<thead>
									<tr>
										<th>
											<button id="modal-841690" href="#modal-container-841690" data-toggle="modal" type="button" class="btn btn-primary btn-xs">添加</button>

											<div class="modal fade" id="modal-container-841690" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  <!--触发遮罩窗体-->
												<div class="modal-dialog">
													<div class="modal-content">
														<div class="modal-header">
															<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
															<h4 class="modal-title" id="myModalLabel">
																手动添加持股
															</h4>
														</div>
														<div class="modal-body">
															<!-- 内置表单 -->
															<form class="form-horizontal">
																<fieldset>
																	<div class="control-group">
																		<!-- Text input-->
																		<label class="control-label">股票名</label>
																		<div class="controls">
																			<input type="text" placeholder="合法股票名" class="input-xlarge" id="input_stockname">
																		</div>
																	</div>

																	<div class="control-group">
																		<!-- Search input-->
																		<label class="control-label">股票所属板块</label>
																		<div class="controls">
																			<input type="text" placeholder="所属板块" class="input-xlarge" id="input_stock_industry">
																		</div>
																	</div>
																</fieldset>
															</form>

														</div>
														<div class="modal-footer">
															<button type="button" class="btn btn-default" data-dismiss="modal" id="cancel_add">取消</button>
															<button type="button" class="btn btn-primary" id="add_stock" data-dismiss="modal">提交</button>
															<!--这个提交会直接与flask交互-->
														</div>
													</div>
												</div>

											</div>
											<!--表格开始-->
										</th>
										<th>
											股票代码
										</th>
										<th>
											名称
										</th>
										<th>
											持仓数量
										</th>
										<th>
											总值
										</th>
										<th>
											成本
										</th>
										<th>
											现价
										</th>
										<th>
											盈亏（元）
										</th>
										<th>
											操作
										</th>
									</tr>
									</thead>
									<tbody id="stock_list">  <!--待更新内容-->

									</tbody>
								</table>
							</div>
						</div>

						<div class="row clearfix">
							<div class="col-md-4 column">
								<div class="panel panel-success">
									<div class="panel-heading">
										<h3 class="panel-title">
											统计汇总
										</h3>
									</div>
									<div class="panel-body" id="statistics">
										<p>持有资金： <span id="money">0</span></p><br/>
										<p>累计盈利： <span id="totalget">0</span></p><br/>
										<p>累计亏损： <span id="totallost">0</span></p><br/>
										<p>资产总值：  <span id="totalvalue">0</span></p><br/>
										<p>运行中的分析器组合： <span id="analyzergroup">0</span></p>
									</div>
								</div>
							</div>
							<div class="col-md-8 column">
								<div class="panel panel-info">
									<div class="panel-heading">
										<h3 class="panel-title">
											实时消息
										</h3>
									</div>
									<div class="panel-body">
										<button type="button" id="update">更新</button>
										<table class="table">
											<thead>
											<tr>
												<th>
													编号
												</th>
												<th>
													属性
												</th>
												<th>
													消息
												</th>
												<th>
													日期
												</th>
											</tr>
											</thead>
											<tbody id="stocknews">
											<!--分页表格更新位置-->
											</tbody>
										</table>
										<div id="pages"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="panel-145673">

						<div class="panel panel-warning">
							<div class="panel-heading">
								<h3 class="panel-title">
									Cypher生成
								</h3>
							</div>
							<div class="cypherarea">
								<button class="btn btn-default btn-warning" id="outputbtn">基本关系网</button>
								<input class="cypheroutput" type="text" id="outputscope">
							</div>
						</div>

						<div class="panel panel-primary">
							<div class="panel-heading">
								<h3 class="panel-title">
									实体写入
								</h3>
							</div>
							<div class="cypherarea">
								<form class="form-horizontal" role="form">
									<div class="form-group">
										<label for="object_name" class="col-sm-2 control-label">实体名称</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="object_name" />
										</div>
									</div>
									<div class="form-group">
										<label for="object_id" class="col-sm-2 control-label">实体编号（或股票编号）</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="object_id" />
										</div>
									</div>
									<div class="form-group">
										<label for="object_desc" class="col-sm-2 control-label">实体描述</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="object_desc" />
										</div>
									</div>
									<div class="form-group">
										<div class="col-sm-offset-2 col-sm-10">
											<button type="button" class="btn btn-default">写入图数据库</button>
										</div>
									</div>
								</form>
							</div>
						</div>

						<div class="panel panel-primary">
							<div class="panel-heading">
								<h3 class="panel-title">
									其他实体与目标实体关系写入
								</h3>
							</div>
							<div class="cypherarea">
								<form class="form-horizontal" role="form">
									<div class="form-group">
										<label for="other_object_name" class="col-sm-2 control-label">其他实体</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="other_object_name" />
										</div>
									</div>
									<div class="form-group">
										<label for="other_object_id" class="col-sm-2 control-label">其他实体编号（或股票编号）</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="other_object_id" />
										</div>
									</div>
									<div class="form-group">
										<label for="object_relation" class="col-sm-2 control-label">与目标实体的关系</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="object_relation" />
										</div>
									</div>
									<div class="form-group">
										<label for="other_object_desc" class="col-sm-2 control-label">其他实体描述</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" id="other_object_desc" />
										</div>
									</div>
									<div class="form-group">
										<div class="col-sm-offset-2 col-sm-10">
											<button type="button" class="btn btn-default">写入图数据库</button>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="panel-100000">
						<div class="panel panel-warning">
							<div class="panel-heading">
								<h3 class="panel-title"> <!--手动添加持仓，这个功能暂时不用-->
									分析器组合配置
								</h3>
							</div>
							<div class="panel-body">
								<div>
									<ul class="pagination" id="xx"></ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	//function appendThenCallback(obj,str,tfunc) {
	//	obj.append(str)
	//	tfunc
	//}
	function showCancel() {
		jQuery(".table-condensed").before(
		'<div class="alert alert-warning alert-dismissable"> ' +
		'<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> ' +
		'<strong>成功！</strong>已取消斩仓 </div>'
		)
	}
	function showSuccess() {
		jQuery(".table-condensed").before(
			'<div class="alert alert-success alert-dismissable"> ' +
			'<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> ' +
			'<strong>成功！</strong>已添加 </div>'
		)
	}
	function showError(error_msg) {
		jQuery(".table-condensed").before(
		    '<div class="alert alert-danger alert-dismissable"> ' +
			'<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> ' +
			'<strong>失败！</strong>'+error_msg+' </div>'
		)
    }
	function deleteStock(sid) {
		jQuery(document).ready(function () {
			var con = confirm("真的斩仓？")
			if(con == true) {
				jQuery(sid).remove()
			}
			else{
				showCancel()
			}
		})
	}
</script>
<script>
	jQuery(document).ready(function () {              <!--提交信息后的url搜索服务，不再直接用函数更新页面，持仓列表应该通过API查询-->
		jQuery("#add_stock").click(function () {
		    var stock_name = jQuery("#input_stockname").val();
		    var stock_industry = jQuery("#input_stock_industry").val()
			jQuery.ajax({
			    type:'POST',
				url:'/search',
				data:JSON.stringify({"stock_name":stock_name, "industry": stock_industry}),
				contentType:'application/json; charset=UTF-8',
				dataType:'json',
				success:function (response) {
					if('error' in response){
					    showError(response.error)
					}
					else{
					    //console.log(response)
						showSuccess();
					}
                },
				complete:function () {
					jQuery("#input_stockname").val("");
					jQuery("#input_stock_industry").val("");
                }
			})
			//appendThenCallback(jQuery('#stock_list'),
			//	'<tr class="success" id="stock4"> ' +  <!--id是通过flask传过来的-->
			//	'<td>3.</td>' +
			//	'<td> 601002 </td> ' +
			//	'<td>晋亿实业 </td> ' +
			//	'<td>100 </td> ' +
			//	'<td>928 </td> ' +
			//	'<td>9.20 </td> ' +
			//	'<td>9.28 </td> ' +
			//	'<td>8 </td> ' +
			//	'<td> <button type="button" class="btn btn-danger btn-xs" onclick="deleteStock(\'#stock4\')">斩仓</button> </td> ' +
			//	'</tr>',showSuccess())
		})
	})

	jQuery(document).ready(function () {          //如果选择不提交就
		jQuery("#cancel_add").click(function () {
			jQuery("#input_stockname").val("");
			jQuery("#input_stock_industry").val("");
        })
    })
</script>
<script>
	jQuery(document).ready(function () {
		jQuery('#outputbtn').click(function () {
			jQuery("#outputscope").val('Match (n: people) where n.age = 18 return n Match (n: people) where n.age > 18 return n')
			}   <!--生成cypher-->
		)
	})
</script>
<script>
	Messenger.options = {
		extraClasses: 'messenger-fixed messenger-on-bottom messenger-on-right',
		theme: 'future'
		//配置messenger
	}
	jQuery(document).ready(function () {
		jQuery('#message').click(function () {
			Messenger().post({
				message: "2017-08-17 03:47 | 000050 | offer:22.33 amount:900",//提示信息
				type: 'info',//消息类型。error、info、success
				hideAfter: 5,//多长时间消失
				showCloseButton:true,//是否显示关闭按钮
				hideOnNavigate: true //是否隐藏导航
				//提示买卖信号
			})
		})
	})
</script>
<script>
	var gendeletebtn = '<button type="button" class="btn btn-danger btn-xs">斩仓</button>'; //一个删除按钮对象
	jQuery(document).ready(function () {
		jQuery('#update').click(function () {
			UpdateList('#stock1')            //更新列表内容
		})
	})
	function UpdateList(sid) {   <!--这个部分flask负责处理js串，由网页的js循环获取并提取文本通过html方法更新列表中的任意一行-->
		jQuery(sid).html('<td>1. </td> ' +
			'<td>000725 </td> ' +
			'<td>京东方A </td> ' +
			'<td>3000 </td> ' +
			'<td>3830 </td> ' +
			'<td>3.81 </td> ' +
			'<td>4.0 </td> ' +
			'<td>20 </td> ' +
			'<td>'+gendeletebtn+'</td>')
	}
    
	//-------------------------------------------------------------

	function ShowListCallback(data) {   <!--将数据返回到页面上-->
		jQuery("#stock_list").append(data)
	}
    function QueryStockInfoFromServ() {   <!--发送Ajax请求,更新股票持仓信息-->
	    jQuery.ajax({type:'POST',
		             url:'/stock_info',
		             data:JSON.stringify({"msg":"query"}),
		             contentType: 'application/json; charset=UTF-8',
		             dataType: 'json',
		             success:function (response) {
                         //console.log(response.data)
                         ShowListCallback(response.data)
                     }
	    })
    }
    jQuery(document).ready(function () {  <!--页面加载的时候进行查询和展示-->
	    QueryStockInfoFromServ()
    })
	
	//--------------------------------------------------------------

	function ShowStatisticsResult(data) {  <!--对统计数据进行更新-->
	    jQuery("#money").text(data.money);
		jQuery("#totalget").text(data.totalget);
		jQuery("#totallost").text(data.totallost);
		jQuery("#totalvalue").text(data.totalvalue);
		jQuery("#analyzergroup").text(data.analyzergroup);
    }

	function QueryStatisticsFromServ() {   <!--发送Ajax请求获取-->
		jQuery.getJSON('/statistics_res',function (data) {
			ShowStatisticsResult(data)
			//console.log(data)
        })
    }

    jQuery(document).ready(function () {
	    setInterval(QueryStatisticsFromServ(),10000)
    })
	
</script>
<script> //根据页码修改内容
	function returnID() {
		ind = $("#pages").pagination('getCurrentPage');
		return ind
	}
	function ChangeContent() {
		jQuery("#stocknews").append(htmls[(returnID()-1)])
	}
	var itemsamount = 1000
	$(function() {
		$("#pages").pagination({
			items: itemsamount,
			itemsOnPage: 10,
			cssStyle: 'light-theme',
			prevText: '前一页',
			nextText: '下一页',
			onPageClick: function () {
				jQuery("#stocknews").empty();
				ChangeContent()
			}
		});
	});

	htmls = ['<tr class="success"> <td>1</td> <td>利好</td> <td>xxxxx1 </td> <td>01/04/2012 </td> </tr>',
		'<tr class="info"> <td>2</td> <td>利空</td> <td>dssdsdsds </td> <td>01/05/2012 </td>  </tr>',
		'<tr class="warning"> <td>3</td> <td>中性</td> <td>ddffffff </td> <td>01/04/2012 </td>  </tr>',
		'<tr class="error"> <td>4</td> <td>中性</td> <td>saaaaaaaaa </td> <td>01/04/2012 </td>  </tr>']   //分页显示的内容
    jQuery("#stocknews").append(htmls[0])
</script>
<script> //注销提醒
	jQuery("#logout").click(function () {
		 alert("退出中...");
		 jQuery.ajax({
                type: 'POST',
			    url: '/logout',
			    data: JSON.stringify({"msg":"logout"}),
                contentType: 'application/json; charset=UTF-8',
                dataType: 'json',
                success:function () {
	                window.location.href="/"
                }
            })
    })
</script>
</body>
</html>